<template>
    <div>
        <a-form layout="inline"
                :model="searchData"
                style="margin: 10px 0">
            <a-form-item>
                <a-input v-model:value="searchData.name" placeholder="公司名称"></a-input>
            </a-form-item>
            <a-form-item>
                <a-input v-model:value="searchData.remark" placeholder="公司描述"></a-input>
            </a-form-item>
            <a-form-item>
                <a-button type="primary" @click="load">搜索</a-button>
            </a-form-item>
            <a-form-item>
                <a-button type="default" @click="rest">重置</a-button>
            </a-form-item>
        </a-form>
        <a-button type="primary" style="margin-bottom: 10px" @click="openModal({})">新增</a-button>
        <a-table :dataSource="companyList"
                 :columns="columns"
                 :pagination="pagination"
                 @change="handlerChange"
                 bordered>
            <template v-slot:action="{text,record}">
                <a-space>
                    <a-button type="primary" ghost @click="openCooperateGoodsModal(record)">合作商品</a-button>
                    <a-button type="primary" @click="openModal(record)">编辑</a-button>
                    <a-popconfirm
                            title="删除数据无法恢复，请确认是否删除？"
                            ok-text="是"
                            cancel-text="否"
                            @confirm="okDelete(record.id)"
                    >
                        <a-button type="danger">删除</a-button>
                    </a-popconfirm>
                </a-space>
            </template>
        </a-table>
        <a-modal v-model:visible="visible" title="新增或编辑" @ok="handleOk">
            <a-form v-model="company"
                    :label-col="{ span: 8 }">
                <a-form-item label="公司名称">
                    <a-input v-model:value="company.name"></a-input>
                </a-form-item>
                <a-form-item label="公司描述">
                    <a-input v-model:value="company.remark"></a-input>
                </a-form-item>
            </a-form>
        </a-modal>
        <a-modal v-model:visible="goodsVisible" title="合作商品" @ok="cooperateGoodsOk">
            <a-form v-model="company"
                    :label-col="{ span: 8 }">
                <a-form-item label="公司名称">
                    <a-input v-model:value="company.name" :disabled="true"></a-input>
                </a-form-item>
                <a-form-item label="合作商品列表">
                    <a-button type="primary" @click="addGoodsListObject">新增合作商品</a-button>
                    <table style="width: 100%">
                        <thead>
                            <td>商品名称</td>
                            <td>商品单价</td>
                            <td>操作</td>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in goodsList" :key="index">
                                <td>
                                    <a-input v-model:value="item.name"></a-input>
                                </td>
                                <td>
                                    <a-input-number v-model:value="item.price" :min="0"></a-input-number>
                                </td>
                                <td>
                                    <a-button type="danger" @click="deleteGoodsListObject(index)">删除</a-button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
    import {ref, onMounted} from 'vue'
    import axios from 'axios'
    import {message} from 'ant-design-vue';
    export default {
        name: "cooperate-company",
        setup() {
            const columns = [
                {
                    title: 'ID',
                    dataIndex: 'id',
                    key: 'id',
                    align: 'center'
                },
                {
                    title: '公司名称',
                    dataIndex: 'name',
                    key: 'name',
                    align: 'center'
                },
                {
                    title: '公司描述',
                    dataIndex: 'remark',
                    key: 'remark',
                    align: 'center'
                },
                {
                    title: '操作',
                    key: 'action',
                    slots: {customRender: 'action'},
                    align: 'center',
                    width: '30%'
                }
            ]

            const company = ref({})
            const companyList = ref()
            const goodsList = ref([])
            const searchData = ref({})
            const pagination = ref({
                current: 1,
                pageSize: 6,
            })

            const visible = ref(false)
            const goodsVisible = ref(false)

            const load = () => {
                axios.get('/company/list', {
                    params: {
                        pageNum: pagination.value.current,
                        pageSize: pagination.value.pageSize,
                        name: searchData.value.name,
                        remark: searchData.value.remark
                    }
                }).then(rs => {
                    console.log("查找结果：", rs)
                    companyList.value = rs.data.data.list
                    pagination.value.total = rs.data.data.total
                })
            }

            const rest = () => {
                searchData.value = {}
                load()
            }

            const handlerChange = (pageInfo) => {
                pagination.value = pageInfo
                load()
            }

            const openModal = (obj) => {
                console.log("模态框参数：", obj)
                visible.value = true;
                company.value = JSON.parse(JSON.stringify(obj))
            }

            const openCooperateGoodsModal = (obj) =>{
                console.log("模态框参数：", obj)
                company.value = JSON.parse(JSON.stringify(obj))
                goodsList.value = []
                axios.get('/goods/queryByCompanyId/' + company.value.id).then(rs=>{
                    goodsList.value = rs.data.data
                })
                goodsVisible.value = true;
            }

            const handleOk = () => {
                axios.post('/company/saveOrUpdate', company.value).then(rs => {
                    console.log("新增或修改结果：", rs)
                    if (rs.data.code == 200) {
                        visible.value = false
                        message.success("操作成功")
                        load()
                    } else {
                        message.error(rs.data.message)
                    }
                })
            }

            const cooperateGoodsOk = () =>{
                company.value.cooperateGoodsList = goodsList.value
                axios.post('company/updateCooperateGoods',company.value).then(rs=>{
                    if (rs.data.code == 200) {
                        goodsVisible.value = false
                        message.success("操作成功")
                        load()
                    } else {
                        message.error(rs.data.message)
                    }
                })
                console.log()
            }

            const okDelete = (id) => {
                console.log("要删除的ID：" + id)
                axios.delete('/company/delete/' + id).then(rs => {
                    if (rs.data.code == 200) {
                        message.success("删除成功")
                        load()
                    } else {
                        message.error(rs.data.message)
                    }
                })
            }

            const addGoodsListObject = () =>{
                goodsList.value.push({})
            }
            const deleteGoodsListObject = (index) =>{
                goodsList.value.splice(index,1)
            }

            onMounted(() => {
                load()
            })
            return {
                columns,
                pagination,
                handlerChange,
                searchData,
                load,
                rest,
                openModal,
                openCooperateGoodsModal,
                visible,
                goodsVisible,
                handleOk,
                cooperateGoodsOk,
                okDelete,
                company,
                companyList,
                goodsList,
                addGoodsListObject,
                deleteGoodsListObject
            }
        }
    }
</script>

<style scoped>

</style>